<template>
	<view>
		<uni-calendar
		:insert="true"
		:lunar="true" 
		:showMonth="false"
		:start-date="'2019-3-2'"
		:end-date="'2019-5-20'"
		@change="change"
		 ></uni-calendar>
		 <sig-card :sData="goWrod"></sig-card>
		 <sig-card :sData="outWrod"></sig-card>
		 
		 <view class="appeal_btn flex justify-center align-center">
			 <text>考勤异常申诉</text>
		 </view>
	</view>
</template>

<script>
	import qqmapsdk from '../../sdk/qqmap-wx-jssdk.min.js'
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	import sigCard from '@/components/my-components/signedCard/signedCard.vue'
	export default {
		components: {
			uniCalendar,
			'sig-card':sigCard
		},
		data() {
			return {
				goWrod:{
					statu: '上班',
					time: '09:15',
					src: '/static/signedIco/sun.png',
					location: '获取地址中...'
				},
				outWrod:{
					statu: '下班',
					time: '19:15',
					src: '/static/signedIco/moon.png',
					location: '获取地址中...'
				}
			};
		},
		created() {
			const QQMapWX = new qqmapsdk({
				key: 'LYTBZ-RS5CW-LKDRN-O4RMX-QVY4H-KXFXX'
			});
			uni.getLocation({
				type: 'wgs84',
				geocode: true,
				success: (res) => {
					this.latitude = res.latitude;
					this.longitude = res.longitude;
				},
				fail: () => {
					console.log("获取经纬度失败");
				},
				complete: () => {
					// 解析地址
					QQMapWX.reverseGeocoder({
						location: {
							latitude: this.latitude,
							longitude: this.longitude
						},
						success: (res)=> {
							console.log(res)
							this.goWrod.location = res.result.address;
							this.outWrod.location = res.result.address;
							console.log(res.result.address);
						},
						fail: function(res) {
							uni.showToast({
								title: '定位失败',
								duration: 2000,
								icon: "none"
							})
						},
						complete: function(res) {
						}
					})
				}
			})
		},
		methods: {
			change(e) {
				console.log(e);
			}
		}
	};
</script>

<style>
	.appeal_btn{
		width: 700rpx;
		margin: 0 auto;
		margin-top: 68rpx;
		height: 80rpx;
		background-color: #5275AB;
		border-radius: 16rpx;
	}
	.appeal_btn text {
		color: #FFFFFF;
	}
</style>
